<template>
  <el-card>
    <el-button @click="$router.push('/admin/add')" type="primary" icon="el-icon-plus">添加管理员</el-button>
    <el-divider></el-divider>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="username" label="账号" width="180"></el-table-column>
      <el-table-column prop="rolename" label="角色" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.status==1">启用</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button
            @click="$router.push(`/admin/${scope.row.uid}`)"
            type="primary"
            icon="el-icon-edit"
            size="mini"
            circle
          ></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="pageChange" :page-size="1" :total="total" background></el-pagination>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      size: 1,
      list: [],
      total: 0
    };
  },
  methods: {
    //获取管理员列表
    async getAdminList() {
      const res = await this.$http.get("/api/userlist", {
        params: { page: this.page, size: this.size }
      });
      if (res.code == 200) {
        this.list = res.list;
      }
    },
    async getAdminCount() {
      const { list } = await this.$http.get("/api/usercount");
      this.total = list[0].total;
    },
    pageChange(page) {
      // console.log(page);
      // 更新页码
      this.page = page;
      // 重新请求数据
      this.getAdminList();
    }
  },
  created() {
    this.getAdminList();
    this.getAdminCount();
  }
};
</script>

<style>
</style>